<template>
  <div class="container">
    <toolbar :search="true">
      <div slot="tab">
        <cube-tab-bar v-model="selectedLabel" show-slider ref="tabNav" :data="tabLabels">
          <cube-tab v-for="item in tabLabels" :label="item.label" :key="item.label">
            <div class="tab-item">{{item.label}}</div>
          </cube-tab>
        </cube-tab-bar>
      </div>
    </toolbar>
    <div class="t-container tab-slide-container">
      <cube-slide
        ref="slide"
        :loop="false"
        :initial-index="initialIndex"
        :auto-play="false"
        :show-dots="false"
        :options="slideOptions"
        @scroll="scroll"
        @change="changePage"
      >
        <!--精选-->
        <cube-slide-item>
            <concentration-view></concentration-view>
        </cube-slide-item>
        
        <!--男生-->
        <cube-slide-item>
            <man-view></man-view>
        </cube-slide-item>
        
        <!--女生-->
        <cube-slide-item>
            <wo-man-view></wo-man-view>
        </cube-slide-item>
      </cube-slide>
    </div>
  </div>
</template>

<script>
import Toolbar from "../../components/Toolbar";
import ConcentrationView from './page/Concentration'
import ManView from './page/Man'
import WoManView from './page/WoMan'

import { findIndex, show } from "utils/Base";

export default {
  name: "BookShop",
  components: {
    Toolbar,
    ConcentrationView,
    ManView,
    WoManView
  },
  data() {
    return {
      selectedLabel: "精选",
      tabLabels: [{ label: "精选" }, { label: "男生" }, { label: "女生" }],
      slideOptions: {
        listenScroll: true,
        probeType: 3,
        directionLockThreshold: 0
      }
    };
  },
  computed: {
    initialIndex() {
      let index = 0;
      return findIndex(
        this.tabLabels,
        item => item.label === this.selectedLabel
      );
    }
  },
  methods: {
    changePage(current) {
      this.selectedLabel = this.tabLabels[current].label;
    },
    scroll(pos) {
      const x = Math.abs(pos.x);
      const tabItemWidth = this.$refs.tabNav.$el.clientWidth;
      const slideScrollerWidth = this.$refs.slide.slide.scrollerWidth;
      const deltaX = (x / slideScrollerWidth) * tabItemWidth;
      this.$refs.tabNav.setSliderTransform(deltaX);
    }
  }
};
</script>

<style lang="stylus" scoped>
@import '~assets/css/style.styl'
.container {
    & >>> .cube-tab-bar-slider {
        width 16px !important
        left calc((100% / 3) / 2 - 8px)
        background-color $colorPrimary
    }
    & >>> .cube-tab_active {
      color $colorPrimary
    }
}
</style>
